/**
 * 拖拽文件、文字和网址
 * @author SPY
 * @date 2020/04/08
 */
import React from 'react';
import { useDrop, useDrag } from '@umijs/hooks';
import { message } from 'antd';

const useDragPage = () => {
  const getDragProps = useDrag();
  const [props, { isHovering }] = useDrop({
    onDom: (content: any, e) => {
      message.success(`您拖动的数据为：${JSON.stringify(content, null, 2)}`);
    },
  });

  return (
    <div>
      <div
        style={{
          border: '1px dashed #e8e8e8',
          padding: 16,
          textAlign: 'center',
        }}
        {...props}
      >
        {isHovering ? 'release here' : 'drop here'}
      </div>

      <div style={{ display: 'flex', marginTop: 8 }}>
        <div
          {...getDragProps({ type: 'Input' })}
          style={{
            border: '1px solid #e8e8e8',
            padding: 16,
            width: 160,
            cursor: 'move',
            textAlign: 'center',
            marginRight: 16,
          }}
        >
          展示组件名称
        </div>
      </div>
    </div>
  );
};

useDragPage.title = 'useDrag&useDrop 用法';

export default useDragPage;
